<template>
  <div class="container">
    <el-button type="primary"
               @click="showTable">选择</el-button>
    <span class="tips">已选择{{sel_arr.length}}条</span>
    <el-dialog title="表格"
               :visible.sync="is_show"
               :modal="false"
               width="50%">
      <FormTable ref="select_table"
                 :formData="formData"
                 :columnData="columnData"
                 :url="url"
                 label-width="160px"
                 :is_show_new="false"
                 @handleSelectionChange="handleSelectionChange"
                 :pageConfig="pageConfig"></FormTable>
      <div class="btn_line">
        <el-button type="primary"
                   @click="sumbitSelect">提交</el-button>
        <el-button type="normal"
                   @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      is_show: false,
      sel_arr: [],
      pageConfig: {
        page: 1,
        pagesize: 10
      }
    }
  },
  props: {
    formData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    columnData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    // 请求地址
    url: {
      type: String,
      required: true,
      default: () => {
        return ''
      }
    },
    // 属性名称
    name: {
      type: String,
      required: true,
      default: () => {
        return ''
      }
    },
  },
  methods: {
    showTable () {
      this.is_show = true;
    },
    handleSelectionChange (e) {
      console.log(e);
      this.sel_arr = e;
    },
    sumbitSelect () {
      this.$emit('selectTableHandler', {
        name: this.name,
        data: this.sel_arr
      })
      this.is_show = false;
    },
    clearSelection () {
      this.$refs.select_table.clearSelection();
    },
    closeDialog () {
      this.clearSelection();
      this.is_show = false;
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  margin-left: -20px;
}
.btn_line {
  margin-top: 20px;
}
.tips {
  margin-left: 20px;
}
</style>